/**
 * 系统维护页面交互脚本
 * 功能：自动刷新、时间显示、动态效果
 */

(function() {
    'use strict';

    // 配置参数
    const CONFIG = {
        autoRefreshInterval: 30000, // 30秒自动刷新
        timeUpdateInterval: 1000,   // 1秒更新时间
        maxRetries: 3,              // 最大重试次数
        retryDelay: 5000           // 重试延迟
    };

    // 全局变量
    let autoRefreshTimer = null;
    let timeUpdateTimer = null;
    let retryCount = 0;
    let startTime = new Date();

    /**
     * 初始化页面
     */
    function init() {
        console.log('维护页面初始化开始');
        
        // 设置初始时间
        updateMaintenanceTime();
        
        // 启动定时器
        startTimers();
        
        // 绑定事件
        bindEvents();
        
        // 检查系统状态
        checkSystemStatus();
        
        // 添加键盘快捷键
        addKeyboardShortcuts();
        
        console.log('维护页面初始化完成');
    }

    /**
     * 更新维护时间显示
     */
    function updateMaintenanceTime() {
        const recoveryTimeElement = document.getElementById('recovery-time');
        if (!recoveryTimeElement) return;

        // 从URL参数或localStorage获取预计恢复时间
        const urlParams = new URLSearchParams(window.location.search);
        const estimatedTime = urlParams.get('time') || localStorage.getItem('maintenanceTime') || '30分钟';
        
        recoveryTimeElement.textContent = estimatedTime;
        
        // 如果是具体时间格式，计算倒计时
        if (estimatedTime.includes(':')) {
            startCountdown(estimatedTime);
        }
    }

    /**
     * 开始倒计时
     * @param {string} targetTime - 目标时间 (HH:MM格式)
     */
    function startCountdown(targetTime) {
        const recoveryTimeElement = document.getElementById('recovery-time');
        if (!recoveryTimeElement) return;

        function updateCountdown() {
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const [hours, minutes] = targetTime.split(':').map(Number);
            const target = new Date(today.getTime() + hours * 3600000 + minutes * 60000);
            
            // 如果目标时间已过，设为明天
            if (target <= now) {
                target.setDate(target.getDate() + 1);
            }
            
            const diff = target - now;
            
            if (diff <= 0) {
                recoveryTimeElement.textContent = '即将恢复';
                checkSystemStatus();
                return;
            }
            
            const hoursLeft = Math.floor(diff / 3600000);
            const minutesLeft = Math.floor((diff % 3600000) / 60000);
            const secondsLeft = Math.floor((diff % 60000) / 1000);
            
            recoveryTimeElement.textContent = `${hoursLeft}小时${minutesLeft}分${secondsLeft}秒`;
        }
        
        updateCountdown();
        timeUpdateTimer = setInterval(updateCountdown, 1000);
    }

    /**
     * 启动定时器
     */
    function startTimers() {
        // 自动刷新定时器
        autoRefreshTimer = setInterval(() => {
            console.log('自动检查系统状态');
            checkSystemStatus();
        }, CONFIG.autoRefreshInterval);
        
        console.log(`自动刷新已启动，间隔：${CONFIG.autoRefreshInterval / 1000}秒`);
    }

    /**
     * 停止定时器
     */
    function stopTimers() {
        if (autoRefreshTimer) {
            clearInterval(autoRefreshTimer);
            autoRefreshTimer = null;
        }
        
        if (timeUpdateTimer) {
            clearInterval(timeUpdateTimer);
            timeUpdateTimer = null;
        }
    }

    /**
     * 绑定事件
     */
    function bindEvents() {
        // 刷新按钮点击事件
        const refreshBtn = document.getElementById('refresh-btn');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', handleRefreshClick);
        }
        
        // 页面可见性变化事件
        document.addEventListener('visibilitychange', handleVisibilityChange);
        
        // 窗口焦点事件
        window.addEventListener('focus', handleWindowFocus);
        window.addEventListener('blur', handleWindowBlur);
        
        // 网络状态变化事件
        window.addEventListener('online', handleNetworkOnline);
        window.addEventListener('offline', handleNetworkOffline);
    }

    /**
     * 添加键盘快捷键
     */
    function addKeyboardShortcuts() {
        document.addEventListener('keydown', (event) => {
            // F5 或 Ctrl+R 刷新
            if (event.key === 'F5' || (event.ctrlKey && event.key === 'r')) {
                event.preventDefault();
                handleRefreshClick();
            }
            
            // Esc 键停止自动刷新
            if (event.key === 'Escape') {
                toggleAutoRefresh();
            }
        });
    }

    /**
     * 处理刷新按钮点击
     */
    function handleRefreshClick() {
        const refreshBtn = document.getElementById('refresh-btn');
        if (refreshBtn) {
            refreshBtn.disabled = true;
            refreshBtn.textContent = '检查中...';
            
            // 确保按钮状态能够恢复
            const resetButton = () => {
                refreshBtn.disabled = false;
                refreshBtn.textContent = '立即刷新';
            };
            
            // 设置超时保护，确保按钮不会永久禁用
            const timeoutId = setTimeout(resetButton, 10000); // 10秒超时
            
            setTimeout(() => {
                checkSystemStatus(true).finally(() => {
                    clearTimeout(timeoutId);
                    resetButton();
                });
            }, 500);
        }
    }

    /**
     * 处理页面可见性变化
     */
    function handleVisibilityChange() {
        if (document.hidden) {
            console.log('页面隐藏，暂停自动刷新');
            stopTimers();
        } else {
            console.log('页面显示，恢复自动刷新');
            startTimers();
            checkSystemStatus();
        }
    }

    /**
     * 处理窗口获得焦点
     */
    function handleWindowFocus() {
        console.log('窗口获得焦点');
        checkSystemStatus();
    }

    /**
     * 处理窗口失去焦点
     */
    function handleWindowBlur() {
        console.log('窗口失去焦点');
    }

    /**
     * 处理网络连接
     */
    function handleNetworkOnline() {
        console.log('网络已连接');
        showNetworkStatus('网络已连接', 'success');
        checkSystemStatus();
    }

    /**
     * 处理网络断开
     */
    function handleNetworkOffline() {
        console.log('网络已断开');
        showNetworkStatus('网络连接已断开', 'error');
    }

    /**
     * 显示网络状态
     * @param {string} message - 消息内容
     * @param {string} type - 消息类型 (success/error/info)
     */
    function showNetworkStatus(message, type = 'info') {
        // 创建状态提示元素
        const statusElement = document.createElement('div');
        statusElement.className = `network-status ${type}`;
        statusElement.textContent = message;
        statusElement.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            border-radius: 5px;
            color: white;
            font-weight: 500;
            z-index: 1000;
            animation: slideInRight 0.3s ease-out;
            background: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#17a2b8'};
        `;
        
        document.body.appendChild(statusElement);
        
        // 3秒后自动移除
        setTimeout(() => {
            statusElement.style.animation = 'slideOutRight 0.3s ease-in';
            setTimeout(() => {
                if (statusElement.parentNode) {
                    statusElement.parentNode.removeChild(statusElement);
                }
            }, 300);
        }, 3000);
    }

    /**
     * 检查系统状态
     * @param {boolean} isManual - 是否为手动检查
     */
    function checkSystemStatus(isManual = false) {
        // 使用智能代理的健康检查端点
        const healthCheckUrl = '/api/health';
        
        return fetch(healthCheckUrl, {
            method: 'GET',
            cache: 'no-cache',
            headers: {
                'Accept': 'application/json'
            },
            timeout: 5000
        })
        .then(response => {
            if (response.ok) {
                // 检查响应类型
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    // 主系统可用，返回JSON响应
                    return response.json().then(data => {
                        console.log('主系统已恢复，智能代理检测到可用状态');
                        handleSystemRecovered();
                    });
                } else {
                    // 主系统可用，但返回HTML页面（可能是主页面）
                    console.log('主系统已恢复，检测到HTML响应');
                    handleSystemRecovered();
                }
            } else if (response.status === 503) {
                // 主系统不可用，继续显示维护页面
                console.log('主系统仍在维护中');
                handleSystemStillDown(isManual);
            } else {
                throw new Error(`HTTP ${response.status}`);
            }
        })
        .catch(error => {
            console.log('系统状态检查失败:', error.message);
            handleSystemStillDown(isManual);
            throw error; // 重新抛出错误以便上层处理
        });
    }

    /**
     * 处理系统恢复
     */
    function handleSystemRecovered() {
        stopTimers();
        
        // 显示恢复提示
        const content = document.querySelector('.maintenance-content');
        if (content) {
            content.innerHTML = `
                <div class="icon">
                    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="10" fill="#28a745"/>
                        <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <h1>系统已恢复正常</h1>
                <p class="main-message">正在跳转到主页面...</p>
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress-fill" style="animation: progressRecover 3s ease-out forwards;"></div>
                    </div>
                </div>
            `;
        }
        
        // 3秒后跳转
        setTimeout(() => {
            window.location.href = '/';
        }, 3000);
    }

    /**
     * 处理系统仍在维护
     * @param {boolean} isManual - 是否为手动检查
     */
    function handleSystemStillDown(isManual) {
        if (isManual) {
            showNetworkStatus('系统仍在维护中，请稍后再试', 'info');
        }
        
        retryCount++;
        console.log(`系统检查次数: ${retryCount}`);
    }

    /**
     * 切换自动刷新
     */
    function toggleAutoRefresh() {
        if (autoRefreshTimer) {
            stopTimers();
            showNetworkStatus('自动刷新已暂停，按ESC键恢复', 'info');
        } else {
            startTimers();
            showNetworkStatus('自动刷新已恢复', 'success');
        }
    }

    /**
     * 获取维护开始时间
     */
    function getMaintenanceStartTime() {
        return startTime.toLocaleString('zh-CN');
    }

    /**
     * 获取维护持续时间
     */
    function getMaintenanceDuration() {
        const now = new Date();
        const duration = Math.floor((now - startTime) / 1000 / 60); // 分钟
        return `${duration}分钟`;
    }

    /**
     * 添加调试信息
     */
    function addDebugInfo() {
        if (window.location.search.includes('debug=true')) {
            const debugInfo = document.createElement('div');
            debugInfo.style.cssText = `
                position: fixed;
                bottom: 10px;
                left: 10px;
                background: rgba(0,0,0,0.8);
                color: white;
                padding: 10px;
                border-radius: 5px;
                font-size: 12px;
                font-family: monospace;
                z-index: 1000;
            `;
            
            function updateDebugInfo() {
                debugInfo.innerHTML = `
                    维护开始: ${getMaintenanceStartTime()}<br>
                    持续时间: ${getMaintenanceDuration()}<br>
                    检查次数: ${retryCount}<br>
                    自动刷新: ${autoRefreshTimer ? '开启' : '关闭'}
                `;
            }
            
            updateDebugInfo();
            setInterval(updateDebugInfo, 1000);
            document.body.appendChild(debugInfo);
        }
    }

    /**
     * 错误处理
     */
    window.addEventListener('error', (event) => {
        console.error('页面错误:', event.error);
    });

    window.addEventListener('unhandledrejection', (event) => {
        console.error('未处理的Promise拒绝:', event.reason);
    });

    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // 添加调试信息
    addDebugInfo();

    // 导出一些方法供外部调用
    window.MaintenancePage = {
        checkSystemStatus,
        toggleAutoRefresh,
        getMaintenanceStartTime,
        getMaintenanceDuration
    };

})();

// 添加CSS动画
const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
    
    @keyframes progressRecover {
        from {
            width: 0%;
        }
        to {
            width: 100%;
        }
    }
`;
document.head.appendChild(style);